<!DOCTYPE html>
<html lang="en">
<head>
    <% include ./public/meta.html %>
    <title>天籁之音</title>
</head>
<body>
    <header>
        <% include ./public/header.html %>
    </header>
    <section>
        <!--banner-->
        <div id="banner" style="margin:1rem auto;">
           <%if(banners.length > 0){%>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                   <% banners.forEach((item,index) => {%>
                    <div class="swiper-slide"> 
                        <a href="<% if(item.Banner_Href){%><%=item.Banner_Href%><% }else{%>javascript:;<%}%>">
                            <img src="<%=conf.pic+item.Banner_Img%>">
                        </a>
                        <div class="title"><%=item.Banner_Title%></div>
                    </div>
                    <% })%>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <%}%>
        </div>
        <!--热门单曲-->
        <%if(music && music.length > 0){%>
        <div class="hot_music">
            <div class="music_title">
                <span>热门单曲</span>
                <span>
                <a href="/audio/hotsong" style="display: block;">
                    <img src="../images/vision_more.png" alt="" style="width:20%;">
                </a>
                </span>
            </div>
            <ul class="music_con">
                <% music.forEach((item,index) => { 
                %>
                <li data-id="" class="clearfix">
                    <div>
                    <% if(item.singer && item.singer.length > 0){%>
                    <img src="<%=item.singer[0].img_url%>" alt="<%=item.singer[0].name%>" style="width:100%;height:40px;">
                    <% } %>
                    </div>
                    <div>
                        <p class="title_box">
                            <span class="title"><%=item.mp3Name%>
                                <%if(item.HQ){%>
                                <b class="hq"></b>
                                <%}%>
                                <%if(item.MV){%>
                                <b class="mv"></b>
                                <%}%>
                            </span>
                            <% if(item.singer && item.singer.length > 0){%>
                            <span class="name"><%=item.singer[0].name%></span>
                            <% } %>
                        </p>
                        <p class="fun"><img src="../images/function.png" alt="" style="width:20%;"></p>
                    </div>
                </li>
                <% })%>
            </ul>
        </div>
        <% } %>
        <!--热门歌手-->
        <%if(singers && singers.length > 0){%>
        <div class="hot_singer">
            <div class="singer_title clearfix">
                <span>热门歌手</span>
                <span>
                    <a href="/audio/hotsinger" style="display: block;">
                    <img src="../images/vision_more.png" alt="" style="width:20%;">
                    </a>
                </span>
            </div>
            <ul class="singer_con clearfix">
                <% singers.forEach((item,index) => { %>
                    <li class="fl">
                        <img src="<%=item.head%>" alt="<%=item.name%>">
                        <span><%=item.name%></span>
                    </li>
                <% })%>
            </ul>
        </div>
        <% } %>
        <!--图标-->
        <p class="icon"><img src="../images/listen_icon.png" alt="" style="width:15%;"></p>
    </section>
    <!--功能及分享弹出框-->
    <div class="listen_box">
        <% include ./public/share.html %>
    </div>
    <% include ./public/footer_js.html %>
</body>
</html>